<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>v-for实例 </title>
	<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
	<h1>HelloWorld</h1>
	<hr>
	<div id="app">
		<ul>
			<li v-for="item in sortItems">
				{{item}}
			</li>
		</ul>
		<hr>
		<ul>
			<li v-for="(student,index) in students">
				{{index+1}}:{{student.name}}-{{student.age}}
			</li>
		</ul>
	</div>

	<script type="text/javascript">
		var app = new Vue({
			el:'#app',	
			data:{
				items:[53,23,7,14,54,36,28],
				students:[
					{name:'Jspang', age:33},
					{name:'Panda', age:28},
					{name:'Panpan', age:23},
					{name:'King', age:14}
				]
			},
			computed:{
				sortItems:function(){
					return this.items.sort();
				},
				sortStudents:function(){
					return sortByKey(this.students,'age');
				}
			}
		});
		function sortNumber(a,b){
			return a-b;
		};

		function sortByKey(array,key){
			return array.sort(function(a,b){
				var x=a[key];
				var y=b[key];
				return ((x<y)?-1:((x>y)?1:0));
			});
		}
	</script>
</body>
</html>